import React, { useState } from 'react'
import YqDataonex from './YqDataonex';
import YqDatatwox from './YqDatatwox';
import styles from './yqtwo.module.css'
interface Tab {
  id: string;
  label: string;
  content: JSX.Element;//JSX.Element 是React定义的一个接口，用于描述JSX表达式可以产生的所有可能的类型。
}
function YQDataTwo() {
  const [activeTab, setActiveTab] = useState('tab2');
  const tabs: Tab[] = [
    { id: 'tab1', label: '我发起的', content: <YqDataonex /> },
    { id: 'tab2', label: '我参与的', content: <YqDatatwox /> }
  ]
  return (
    <div className={styles.tab1}>
      <div className={styles.tabs1}>
        {
          tabs.map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`${styles.button} ${activeTab === tab.id ? styles.actives : ''}`}
            >
              {tab.label}
            </button>
          ))
        }
      </div>
      <div className={styles.content}>{tabs.find(tab => tab.id === activeTab)?.content}</div>
    </div>
  )
}

export default YQDataTwo
